<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"          
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:display="urn:jsptld:http://displaytag.sf.net"
          version="2.0">

    <jsp:directive.page import="java.util.ArrayList"/>
    <jsp:directive.page import="java.util.Iterator"/>
    <jsp:directive.page import="entity.Users"/>
    <jsp:directive.page import="java.util.List"/>

    <jsp:directive.page contentType="text/html" pageEncoding="UTF-8"/>


    <html>
        <head>
            <meta charset="utf-8"/>
            <link rel="stylesheet"  href="css/admin_style.css"  type="text/css" />
            <script type="text/javascript">
                <jsp:include page="scripts/admpageValidator.js" />
            </script>
            <script type="text/javascript">
                <jsp:include page="scripts/jquery-1.8.3.min.js" />
            </script>

            <title>Admin</title>

        </head>
        <body>
            <header>
                <div id ="top_name"> <h1> Admin </h1> </div>
                <div id="user-panel">
                    <p> <a href="#">User name</a>
                        <a href="#">LogOut</a> </p>
                </div>
                <div id="menu">
                    <div id="role"> <select size = '1'> 
                            <option value='1'> Customer </option>
                            <option value='2'> Warehouse Employee </option> 
                            <option value='3'> Courier </option> 
                            <option value='4'> Admin </option> 
                        </select> </div>
                </div>
            </header>

            <div id="main"> 
                <div style="color: red; padding: 5px; position: absolute; "
                     id="warningFind"><c:out value=""/></div>  
                <div id="find" >   
                    <p>Find: <br/>
                    <form method="GET" action="userview" class="js-find-form" onsubmit="return checkFind();"> 
                        <input  id="keyword" type="text" size="30" name="keyword"/>
                        <button type="submit" style="width:60px;"> Search </button>
                    </form>
                    </p>
                </div>


                <div id="sorted" > Sort by:
                    <form method='GET' action='UserView'>

                        <select name="SortBy"  size = '1'> 
                            <option value='FirstName' >Name</option>
                            <option value='Groups' >Group</option>
                            <option value='EMail'>E-mail</option>
                        </select> 
                    </form>
                </div>

                <div id="export"> 
                    <button type="submit" style="width:100px; background: #32CD32;" >Export data</button>
                </div>
                <div id="tabl">
                    <c:if test="${not empty users}"></c:if>
                    <form method="Get" id="mainForm" > 
                        <table border="2">

                            <TR>
                                <td id="check"></td>
                                <td  height="20" bgcolor="99CCFF" align="middle"><strong>Name</strong></td>
                                <td  height="20" bgcolor="99CCFF" align="middle"><strong>Last Name</strong></td>
                                <td height="20" bgcolor="99CCFF" align="middle"><strong>Address</strong></td>
                                <td  height="20" bgcolor="99CCFF" align="middle"><strong>E-mail</strong></td>
                                <td height="20" bgcolor="99CCFF" align="middle"><strong>Group</strong></td>
                                <td  height="20" bgcolor="99CCFF" align="middle"><strong>Roles</strong></td>
                            </TR>




                            <c:set var="totalCount" scope="session" value="${count}"/>
                            <c:set var="perPage" scope="session" value="5"/>
                            <c:set var="totalPages" scope="session" value="${totalCount/perPage}"/>
                            <c:set var="pageIndex" scope="session" value="${param.start/perPage+1}"/>

                            <c:if test="${!empty param.start and param.start >(perPage-1) and param.start !=0 }">
                                <c:set var="url" scope="page" value="?start=${param.start - perPage}"/>
                                <a href="${url}" value="Prev"/>

                            </c:if>






                            <!--<c:forEach var="user" varStatus="status" begin="0" end="${totalCount-1}"  step="${perPage}"> 
                                <c:choose>
                                    <c:when test="${status.count>0 and status.count != pageIndex}">
                                        <c:set var="url" scope="page" value="?start=${user}"/>
                                           <a href="${url}" value="${status.count}|"/>
                                      
       
                                
                                    </c:when>
                                    <c:otherwise>
                                        <c:out value="${status.count}"/> |
                                    </c:otherwise>
                                </c:choose>-->
                                <c:forEach var="user" items="${users}">
                                    <tr>
                                        <td id="check">
                                            <input  id="idUser" name="idUser" type="radio" class="id" value="${user.getIdUser()}"/>

                                        </td>


                                        <td ><c:out value="${user.getFirstName()}"/></td>
                                        <td ><c:out value="${user.getLastName()}"/></td>
                                        <td ><c:out value="${user.getAddress()}"/></td>
                                        <td ><c:out value="${user.getEMail()}"/></td>
                                        <td >
                                            <c:set var="groups" scope="page" value="${user.getGroupsCollection()}"/>
                                            <c:if test="${not empty groups}"> 
                                                <select>
                                                    <c:forEach var="g" items="${groups}">
                                                        <option>
                                                            <c:out value="${g.getGroupName()}"/></option>
                                                        </c:forEach>
                                                </select>
                                            </c:if>
                                            <c:if test="${empty groups}"> None </c:if > 

                                        </td>
                                        <td width="100" height="20" bgcolor="99CCFF" align="middle">

                                            <c:set var="roles" scope="page" value="${user.getRoleCollection()}"/>
                                            <c:if test="${not empty roles}"> 
                                                <select>
                                                    <c:forEach var="role" items="${roles}">
                                                        <option ><c:out value="${role.getRoleName()}"/></option>
                                                    </c:forEach>
                                                </select>
                                            </c:if>
                                            <c:if test="${empty roles}"> None </c:if>
                                        </td>

                                    </tr>
                                </c:forEach>
                                <!-- <c:if test="${empty param.start or param.start lt (totalCount-perPage)}">
                                     
                                    <c:set var="url" scope="page" value="?start=${param.start + perPage}"/>
                                    <a href="${url}" value="Next"/>
                                  
                                    
                                </c:if>-->



                            </table>
                            <c:if test="${currentPage != 1}">
                                <td><button type="submit" style="width:120px; background: #6699FF;" > <a href="userview?page=${currentPage - 1}">Previous</a></button></td>  
                            </c:if>
                            <table border="1" cellpadding="5" cellspacing="5">
                                <td>
                                    <c:forEach begin="1" end="${noOfPages}" var="i">
                                        <c:choose>
                                            <c:when test="${currentPage eq i}">
                                            <td>${i}</td>
                                        </c:when>
                                        <c:otherwise>
                                            <td><a href="userview?page=${i}">${i}</a></td>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                                </td>
                            </table>


                            <c:if test="${currentPage lt noOfPages}">


                                <td><button type="submit" style="width:120px; background: #6699FF;" >  <a href="userview?page=${currentPage + 1}">Next</a></button></td>
                            </c:if>
                        </form>
                    </div>
                    <div id="button1"> <button type="submit" onclick="addUser()" style="width:120px; background: #6699FF;" > Add </button> </div>
                    <div id="button1"> <button type="submit" onclick="deleteUser()" style="width:120px; background: #6699FF;" > Delete </button> </div>
                    <div id="button1"><button type="submit"  onclick="editUser()" style="width:120px; background: #6699FF;">Edit </button> </div>
                    <div id="button2"> <button type="submit" onclick="refreshUser()" style="width:120px; background: #6699FF;" > Refresh </button> </div>
                    <span id="warning" style="color: red; margin-left: 40%"></span><br/>
                    <div>
                        <div id="groups">  
                            <p> <span style="cursor:pointer;color:blue" onclick="document.getElementById('group_menu').style.height = '400px'"> Groups </span>
                            </p>
                        </div>
                        <div id="group_menu" style="height:20px;overflow:hidden">
                            <br/>
                            <br/>
                            <br/>
                            <div id="group_tabl">
                                <table border="2">
                                    <TR>
                                        <td width="100" height="20" bgcolor="99CCFF" align="middle"><strong> Name </strong></td>
                                        <td width="150" height="20" bgcolor="99CCFF" align="middle"><strong> Roles </strong></td>
                                    </TR>
                                    <TR>
                                        <td width="100" height="15"> </td>
                                        <td width="150"  height="15"> </td>
                                    </TR>
                                    <TR>
                                        <td width="100" height="15"> </td>
                                        <td width="150"  height="15"> </td>
                                    </TR>
                                    <TR>
                                        <td width="100" height="15"> </td>
                                        <td width="150"  height="15"> </td>
                                    </TR>
                                </table>
                            </div>
                            <div id="group_button1"> <input type="submit" value="Edit" name="export" style="width:120px; background: #6699FF;"/></div>
                            <div id="group_button1"> <input type="submit" value="Delete" name="export" style="width:120px; background: #6699FF;"/></div>





                            <p> <br/> Name </p>
                            <input type="text" size="30" value="name" id="label"/>
                            <p> Roles <input type="text" size="30" value="roles" id="label"/></p>
                            Add roles   <select name="role" size = "1"> 
                                <option value='1'> Customer </option>
                                <option value='2'> Warehouse Employee </option> 
                                <option value='3'> Courier </option> 
                            </select> 
                            <button type="submit"  style="width:120px; background: #6699FF;" > Add </button> 
                            <div> <button type="submit" style="width:120px; background: #6699FF;" > Create </button> </div>
                            <br/>
                        </div>
                    </div>
                </div>
            </body>
        </html>
</jsp:root>